<template>
    <div v-loading="loading">
        <el-card shadow="hover">
            <div slot="header" class="clearfix">
                <span>{{ $i18n.t('TEL_RECORD') }}</span>
            </div>
            <tel-call-record :data="data.record" />
        </el-card>
        <tel-verify-table :data="data.verify" @on-submit="onSubmit" :btn-loading="btnLoading" :editable="data.detail.completed === false" />
    </div>
</template>

<script>
    import { getApproveDetail, handleApproveTask } from '@/api/approve'
    import TelCallRecord from '@/components/TelCallRecord'
    import TelVerifyTable from '@/components/TelVerifyTable'

    export default {
        name: 'ApproveTel',
        components: { TelCallRecord, TelVerifyTable },
        watch: {
            query () {
                this.loading = true
                const { id } = this.query
                getApproveDetail(id, { method: 'TELRecord' }).then(res => {
                    const { result } = res
                    this.data = result
                }).finally(() => {
                    this.loading = false
                })
            }
        },
        data () {
            return {
                query: {},
                data: {
                    detail: {
                        completed: false
                    },
                    record: [],
                    verify: []
                },
                loading: false,
                btnLoading: false
            }
        },
        activated () {
            this.query = this.$route.query
        },
        created () {
            this.query = this.$route.query
        },
        methods: {
            onSubmit () {
                this.btnLoading = true
                const data = {}
                this.data.verify.forEach(item => {
                    data[item.key] = item.value
                })
                const { id } = this.query
                handleApproveTask(id, { method: 'TELVerify', ...data }).then(res => {
                    this.$Message.success(this.$i18n.t('HANDLE_SUCCESS'))
                }).finally(() => {
                    this.btnLoading = false
                })
            }
        }
    }
</script>

<style scoped>

</style>
